import React, { useState, useCallback } from "react";
import { NextPage } from "next";
import InfinityScroll from "react-infinite-scroller";
import cls from "classnames";
import { Tabs } from "antd";
const { TabPane } = Tabs;

import style from "./index.module.scss";

import { ArticleApi } from "@/api/article";

interface IHomeProps {
  articles: IArticle[];
  total: number;
}
const pageSize = 8;
const Home: NextPage<IHomeProps> = (props) => {
  const { articles: defaultArticle = [], total = 0 } = props as any;
  const [articles, setArticles] = useState(defaultArticle);
  // 当前页数，从第二页开始获取，因为在服务端默认加载了第一页
  const getArticles = useCallback((page) => {}, []);
  const [currentKey, setCurrentKey] = useState("1");

  return (
    <div className={style.wrapper}>
      <div className="container">
        <div className={style.content}>
          <div className={style.list}>
            <Tabs
              animated={false}
              defaultActiveKey="1"
              onChange={(e) => setCurrentKey(e)}
              style={{ width: "100%", backgroundColor: "#fff" }}
            >
              <TabPane tab="科技" key="1"></TabPane>
              <TabPane tab="金融" key="2"></TabPane>
              <TabPane tab="区块链" key="3"></TabPane>
            </Tabs>
          </div>
          <aside className={cls(style.aside)}>
            <div></div>
          </aside>
        </div>
      </div>
    </div>
  );
};

// 服务端预取数据
Home.getInitialProps = async () => {
  return { articles: [], total: 0, needLayoutFooter: false };
};
export default Home;
